<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人信息展示与注册</title>
    <script src="./static/js/vue.global.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            background: linear-gradient(135deg, #ff9a9e, #fad0c4);
        }

       .info-container {
            max-width: 400px;
            width: 100%;
            padding: 20px;
            border: 2px solid #333;
            border-radius: 15px;
            background: white;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            margin-bottom: 20px;
        }

       .info-item {
            margin-bottom: 15px;
            padding: 10px;
            border-radius: 8px;
            background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
            color: #333;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

       .info-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
        }

       .info-item label {
            font-weight: bold;
            margin-right: 10px;
            color: #555;
        }

       .info-item span {
            color: #222;
        }

        h1 {
            text-align: center;
            margin-bottom: 20px;
            font-size: 24px;
            background: linear-gradient(135deg, #121f20, #23aee6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

       .signature {
            margin-top: 20px;
            padding: 10px;
            border-radius: 8px;
            background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
            color: #333;
        }

       .register-container {
            max-width: 400px;
            width: 100%;
            padding: 20px;
            border: 2px solid #333;
            border-radius: 15px;
            background: white;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }
    </style>
</head>

<body>
    <div id="counter" class="container">
        <h1>个人信息展示</h1>
        <div class="info-container">
            <div class="info-item">
                <label>姓名：</label>
                <span>{{ name }}</span>
            </div>
            <div class="info-item">
                <label>年龄：</label>
                <span>{{ age }}</span>
            </div>
            <div class="info-item">
                <label>兴趣爱好：</label>
                <span>{{ hobbies.join(', ') }}</span>
            </div>
            <div class="info-item">
                <label>专业：</label>
                <span>{{ major }}</span>
            </div>
            <div class="signature">
                <h3>个性签名：</h3>
                <div v-html="signatureContent"></div>
            </div>
        </div>

        <div class="register-container">
            <el-form @submit.native.prevent="onSubmit">
                <el-form-item label="用户名">
                    <el-input v-model="registerForm.username"></el-input>
                </el-form-item>
                <el-form-item label="年龄"> <!-- 新增的年龄输入选项 -->
                    <el-input v-model="registerForm.age" type="number"></el-input> <!-- 使用 type="number" 确保输入的是数字 -->
                </el-form-item>
                <el-form-item label="密码">
                    <el-input type="password" v-model="registerForm.password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码">
                    <el-input type="password" v-model="registerForm.confirmPassword"></el-input>
                </el-form-item>
               
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">注册</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>

    <script src="https://unpkg.com/element-plus"></script>
    <script>
        const Counter = {
            data() {
                return {
                    name: '熊开心',
                    age: 25,
                    hobbies: ['吃饭', '睡觉', '打游戏'],
                    major: '土木工程',
                    signatureContent: `
                        <p><strong>签名内容：</strong></p>
                        <blockquote>热爱生活，享受每一天。</blockquote>
                        <ul>
                            <li>不断学习，追求进步。</li>
                            <li>与朋友分享快乐。</li>
                        </ul>
                    `,
                    registerForm: {
                        username: '',
                        password: '',
                        confirmPassword: '',
                        age: '' // 在数据对象中新增 age 属性
                    }
                }
            },
            methods: {
                onSubmit() {
                    if (this.registerForm.password!== this.registerForm.confirmPassword) {
                        this.$message.error('密码不匹配');
                        return;
                    }
                    this.$message.success('注册成功');
                    // 这里可以添加注册成功的处理逻辑，例如发送请求到服务器
                }
            }
        }
        Vue.createApp(Counter).use(ElementPlus).mount('#counter')
    </script>
</body>

</html>